<template>
    <el-dialog title="订单信息" :visible.sync="viewDialogVisible" width="850px">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="订单编号">{{ currentOrder.no }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{ currentOrder.createName }}</el-descriptions-item>
        <el-descriptions-item label="游戏">{{ currentOrder.gameName }}</el-descriptions-item>
         <el-descriptions-item label="区服">{{ currentOrder.qufu }}</el-descriptions-item>
        <el-descriptions-item label="账号">{{ currentOrder.account }}</el-descriptions-item>
        <el-descriptions-item label="租号时长">{{ currentOrder.rentLength }}小时</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag v-if="currentOrder.orderStatus === 1">待支付</el-tag>
          <el-tag type="warning" v-else-if="currentOrder.orderStatus === 2">出租中</el-tag>
          <el-tag type="success" v-else-if="currentOrder.orderStatus === 3">已完成</el-tag>
          <el-tag type="info" v-else-if="currentOrder.orderStatus === 4">已取消</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付状态">
          <el-tag v-if="currentOrder.payStatus === 1">待支付</el-tag>
          <el-tag type="success" v-else-if="currentOrder.payStatus === 2">已支付</el-tag>
          <el-tag type="info" v-else-if="currentOrder.payStatus === 3">已退款</el-tag>
          <el-tag type="info" v-else-if="currentOrder.payStatus === 4">退款中</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="创建时间">{{ currentOrder.createTime }}</el-descriptions-item>
         <el-descriptions-item label="出租人">{{ currentOrder.rentUserName }}</el-descriptions-item>
         <el-descriptions-item label="租号人">{{ currentOrder.useUserName }}</el-descriptions-item>
        <el-descriptions-item v-if="currentOrder.payTime" label="支付时间">{{ currentOrder.payTime }}</el-descriptions-item>
        <el-descriptions-item v-if="currentOrder.finishTime" label="完成时间">{{ currentOrder.finishTime }}</el-descriptions-item>
        <el-descriptions-item label="预付款" v-if="currentOrder.priceSub">
          <span style="color:red">¥{{ currentOrder.priceSub }}</span></el-descriptions-item>
        <el-descriptions-item label="租金"> <span style="color:red">¥{{ currentOrder.priceRent || 0}}</span></el-descriptions-item>
        <el-descriptions-item v-if="currentOrder.priceBack" label="退款金额"> <span style="color:red">¥{{ currentOrder.priceBack || 0}}</span></el-descriptions-item>
      
       <el-descriptions-item v-if="currentOrder.orderStatus === 3" label="服务费金额"> <span style="color:red">¥{{ currentOrder.priceServer || 0}}</span></el-descriptions-item>
        <el-descriptions-item v-if="currentOrder.orderStatus === 3" label="号主结算金额"> 
      <span style="color:red">
        ¥{{ Number((currentOrder.priceTotal || 0) - (currentOrder.priceServer || 0) - (currentOrder.priceBack || 0)).toFixed(2) }}
      </span>        </el-descriptions-item>
      
        <el-descriptions-item label="总金额" :span="6"> <span style="color:red">¥{{ currentOrder.priceTotal
        }}</span></el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

</template>
<script>
export default {
  data() {
    return {
      viewDialogVisible: false,
      currentOrder: {},
    };
  },
  methods: {
    // 查看订单
    async init(row) {
      this.currentOrder = row;
      this.viewDialogVisible = true;
    },
  },
};
</script>
<style></style>